
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->

<div>
    <div id="right" style="width: 1200px; float:top;margin: 0 auto">
        <%--查询框--%>
        <%--查询条件--%>
        <form class="layui-form" action="">

            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">抑郁程度</label>
                <div class="layui-input-block">
                    <select name="degree"  class="layui-select">
                        <option value="">请选择...</option>
                        <option value="正常">正常</option>
                        <option value="轻度抑郁">轻度抑郁</option>
                        <option value="中度抑郁">中度抑郁</option>
                        <option value="重度抑郁">重度抑郁</option>
                    </select>
                </div>

            </div>

            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <%--查询条件结束--%>
        <%--存放一个table--%>
        <table class="layui-hide" id="test2" lay-filter = "test2"></table>
    </div>
    <div style="width: 1200px;margin: 20px auto">
        <div id="main" style="width: 350px;height:300px;display: inline-block "></div>
        <div id="circlemain" style="width: 350px;height:300px;display: inline-block "></div>
        <div id="left" style="width: 350px;height:280px;display: inline-block;position: relative;top: -60px" >
            <table class="layui-hide" id="test" lay-filter = "test"></table>
        </div>
    </div>


</div>
<%--存放一个table--%>

<script type="text/javascript">

    layui.use(['table','layer','form','jquery','tree'], function(){
        var tree = layui.tree;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var namestatus=true;

        var colordata=[];
        var countdata=[];
        var cicledata=[];


        table.render({
            // element  元素
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/tSdsRecord/statistics1' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
            //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'numbers',title:'编号'}
                ,{field:'count', title: '人数', sort: true,}
                ,{field:'degree', title: '焦虑程度', sort: true,}
            ]],
            done: function(res, curr, count){

                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                res.data.forEach(function (item){
                    colordata.push(item.degree);
                    countdata.push(item.count);
                    var obj={};
                    obj["value"]=item.count;
                    obj["name"]=item.degree;
                    cicledata.push(obj);
                })
                // 数据渲染完之后开始显示echart的图
                getEchartPic1();
                getEchartPic2();
            }

        });
        table.render({
            // element  元素
            elem: '#test2'
            ,page:true
            ,limit:10
            ,limits:[10,20,30]
            ,toolbar: '#toolbarDemo'
            ,url:'${pageContext.request.contextPath}/tSdsRecord/statistics2' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'numbers',title:'编号'}
                ,{field:'username', title: '用户名', sort: true}
                ,{field:'tel', title: '电话', sort: true}
                ,{field:'createtime', title: '做题时间', sort: true}
                ,{field:'allScore', title: '总分', sort: true}
                ,{field:'standard', title: '标准分', sort: true}
                ,{field:'degree', title: '焦虑程度', sort: true}
            ]]

        });

        // 查询
        form.on('submit(formDemo)', function(data){
            table.reload('test2', {
                where: data.field,
                page: {
                    curr: 1 //重新从第 1 页开始
                },
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        var getEchartPic1=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '心理分析数据'
                },
                tooltip: {},
                legend: {
                    data: ['心理健康人数']
                },
                xAxis: {
                    data: colordata
                },
                yAxis: {},
                series: [
                    {
                        name: '心理健康人数',
                        type: 'bar',
                        data: countdata

                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        // 饼状图的填充
        var getEchartPic2=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('circlemain'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '心理健康分析数据',
                    // subtext: '分析数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                color:["#FFB5B5","#93FF93","#ACD6FF","#FFFFCE","#EBD3E8"],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data:cicledata
                        ,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

    })


</script>
</body>


</html>
